<!--  -->
<template>
  <div class="container">
    <div class="header">
      <p>叩丁狼电商运营平台</p>
      <span>mowu</span>
    </div>
    <div class="content">
      <div class="left">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          router
        >
          <el-sub-menu
            :index="menu.id + ''"
            v-for="menu in menus"
            :key="menu.id"
          >
            <template #title>
              <span>{{ menu.title }}</span>
            </template>
            <template v-for="submenu in menu.children">
              <el-menu-item
                v-if="!submenu.hidden"
                :index="`/${menu.name}/${submenu.name}`"
                >{{ submenu.title }}</el-menu-item
              >
            </template>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Homepage",
});
</script>

<script lang="ts" setup>
import { computed } from "vue";
import { useAdminStore } from "../../store/modules/admin";

const adminStore = useAdminStore();

const menus = computed(() => adminStore.genNewMenus);
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  width: 100%;
  height: 70px;
  background-color: #409eff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    font-size: 26px;
    color: #fff;
    margin-left: 30px;
  }
  span {
    margin-right: 20px;
    color: #fff;
    font-size: 16px;
  }
}
.content {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 249px;
    height: 100vh;
    background-color: #545c64;
    overflow: auto;
    .el-menu {
      border: 0 !important;
    }
  }
  .right {
    flex: 1;
    background-color: #cff;
  }
}
</style>
